<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>出入库查询</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .query-container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            border-radius: 4px;
        }
        h2 {
            color: #333;
            margin-bottom: 20px;
        }
        .filter-group {
            margin-bottom: 20px;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        input, select, button {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            background: #4285f4;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background: #3367d6;
        }
        .export-btn {
            background: #28a745;
        }
        .export-btn:hover {
            background: #218838;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        .in-record {
            color: #28a745;
        }
        .out-record {
            color: #dc3545;
        }
        .pagination {
            margin-top: 20px;
            display: flex;
            justify-content: center;
            gap: 10px;
        }
        .pagination button {
            min-width: 30px;
        }
    </style>
</head>
<body>
<div class="query-container">
    <h2>出入库记录查询</h2>
    <div class="filter-group">
        <select id="recordType">
            <option value="all">全部记录</option>
            <option value="in">入库记录</option>
            <option value="out">出库记录</option>
        </select>
        <select id="productFilter">
            <option value="">所有商品</option>
            <option value="P1001">iPhone 13</option>
            <option value="P1002">MacBook Pro</option>
        </select>
        <input type="text" id="searchKeyword" placeholder="操作人/客户">
        <input type="date" id="startDate">
        <span>至</span>
        <input type="date" id="endDate">
        <button onclick="loadRecords()">查询</button>
        <button class="export-btn" onclick="exportRecords()">导出记录</button>
    </div>

    <table>
        <thead>
        <tr>
            <th>记录ID</th>
            <th>商品名称</th>
            <th>类型</th>
            <th>数量</th>
            <th>操作人</th>
            <th>客户/用途</th>
            <th>时间</th>
            <th>备注</th>
        </tr>
        </thead>
        <tbody id="recordList">
        <tr>
            <td>IN20230601</td>
            <td>iPhone 13</td>
            <td class="in-record">入库</td>
            <td>20</td>
            <td>张三</td>
            <td>-</td>
            <td>2023-06-01 10:00</td>
            <td>采购入库</td>
        </tr>
        <tr>
            <td>OUT20230602</td>
            <td>MacBook Pro</td>
            <td class="out-record">出库</td>
            <td>2</td>
            <td>李四</td>
            <td>ABC公司</td>
            <td>2023-06-02 14:30</td>
            <td>客户订单</td>
        </tr>
        </tbody>
    </table>

    <div class="pagination">
        <button onclick="changePage(-1)">上一页</button>
        <span>第 <span id="currentPage">1</span> 页 / 共 <span id="totalPages">5</span> 页</span>
        <button onclick="changePage(1)">下一页</button>
    </div>
</div>

<script>
    function loadRecords() {
        // 这里添加加载记录的逻辑
        console.log('加载出入库记录...');
    }

    function exportRecords() {
        alert('记录导出功能将在实际项目中实现');
    }

    function changePage(delta) {
        // 分页逻辑
        alert('分页功能将在实际项目中实现');
    }

    // 设置默认日期为最近30天
    document.addEventListener('DOMContentLoaded', function() {
        const endDate = new Date();
        const startDate = new Date();
        startDate.setDate(startDate.getDate() - 30);

        document.getElementById('endDate').valueAsDate = endDate;
        document.getElementById('startDate').valueAsDate = startDate;

        loadRecords();
    });
</script>
</body>
</html>